<template>
  <div class="competieResultsBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      赛事成绩
      <router-link to="/competieResultsAdd" slot="right" class="addBtn">添加</router-link>
    </x-header>
    <!-- 搜索 -->
    <div class="searchBox">
      <div class="searchInner flex">
        <x-icon type="ios-search-strong" size="22" class="searchIcon"></x-icon>
        <input
          type="text"
          class="searchInput"
          v-model="keyWord"
          placeholder="搜索内容"
          @keyup.enter="searchClick"
        />
      </div>
    </div>
    <div class="listBox">
      <swipeout>
        <swipeout-item v-for="(item,index) in gradeList" :key="index" class="listItem">
          <div slot="right-menu">
            <img src="../assets/img/delete.png" alt class="deletImg" @click="deletClick(item)" />
          </div>
          <div slot="content" class="contentBox">
            <group>
              <cell :title="item.title" value>
                <img slot="icon" width="20" class="titleImg" src="../assets/img/Competition01.png" />
              </cell>
              <cell-form-preview :list="item.infolist" class="cellForm"></cell-form-preview>
            </group>
          </div>
        </swipeout-item>
      </swipeout>
    </div>
  </div>
</template>

<script>
import { XHeader, Swipeout, SwipeoutItem, SwipeoutButton, CellFormPreview, Group, Cell } from 'vux'
export default {
  components: {
    XHeader,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    CellFormPreview,
    Group,
    Cell
  },
  data() {
    return {
      list: [{
        label: 'Apple',
        value: '3.29'
      }, {
        label: 'Banana',
        value: '1.04'
      }, {
        label: 'Fish',
        value: '8.00'
      }],
      keyWord: '',
      gradeList: [
        {
          id: '1',
          time: '2019-02-05',
          title: '北京健美操大赛第一名',
          infolist: [
            {
              label: '比赛时间',
              value: '2019-05-06'
            },
            {
              label: '比赛成绩',
              value: '90'
            },
            {
              label: '比赛地点',
              value: '北京市 海淀区 知春路'
            }
          ],
        },
        {
          id: '2',
          time: '2019-02-05',
          title: '北京马拉松大赛第一名',
          infolist: [
            {
              label: '比赛时间',
              value: '2019-05-06'
            },
            {
              label: '比赛成绩',
              value: '90'
            },
            {
              label: '比赛地点',
              value: '北京市 海淀区 知春路'
            }
          ],
        },
        {
          id: '3',
          time: '2019-02-05',
          title: '国际跳高大赛第六名',
          infolist: [
            {
              label: '比赛时间',
              value: '2019-05-06'
            },
            {
              label: '比赛成绩',
              value: '90'
            },
            {
              label: '比赛地点',
              value: '北京市 海淀区 知春路'
            }
          ],
        },
      ]
    }
  },
  methods: {
    deletClick(item) {
      // this.$http.get('url', {
      //   params: {
      //     seach: this.keyWord
      //   }
      // }).then(res => {
      //   // 成功相应
      // })
      alert('删除' + item.id)
    }
  }

}
</script>

<style lang="less" scoped>
.competieResultsBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
    .vux-header-right {
      color: #000;
      .addBtn {
        color: currentColor;
      }
    }
  }
  // 搜索
  .searchBox {
    padding: 20px;
    border-bottom: 20px solid #f8f9fa;
    .searchInner {
      background-color: #f5f5f5;
      border-radius: 30px;
      padding: 10px 20px;
      .searchIcon {
        fill: #6c6c6c;
        margin-right: 10px;
      }
      .searchInput {
        outline: none;
        border: none;
        background-color: #f5f5f5;
      }
    }
  }
  .demo-content {
    padding: 10px 10px;
  }
  // 列表
  .listBox {
    .listItem {
      padding: 20px;
      border-bottom: 20px solid #f8f9fa;
      .deletImg {
        width: 80px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translate(-50%, -30%);
      }
      .contentBox {
        overflow: hidden;

      }
    }
  }
}
</style>